<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="媒体查询，定义宽中窄屏尺寸">
    <title>媒体查询，定义宽中窄屏尺寸</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            height: 100px;
            background: #ddd;
        }

        /*
        媒体类型有：screen（用于电脑屏幕，平板电脑，智能手机等），print（用于打印机和打印预览），all（用于所有设备）
        媒体类型（media type）描述设备的一般类别。除非使用 not 或 only 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 all 类型。

        为什么使用 only？
        在早期的浏览器中，某些浏览器不支持 @media 查询，但却尝试解释其中的CSS规则。为了避免这种情况，开发者使用了 only 关键字，以确保只有在支持媒体查询的浏览器中才应用这些规则。然而，现代浏览器都支持媒体查询，因此 only 的必要性已经大大降低。但在某些情况下，为了避免旧的浏览器错误地应用这些规则，仍然可以使用 only
        */

        /* 1200px < 大屏 */
        /* 没有媒体类型这样写 @media (min-width: 1200px) */
        /* 使用 only 这样写 @media only screen and (min-width: 1200px) */
        @media screen and (min-width: 1200px) {
            .div1 {
                background-color:red;
            }
        }

        /* 800px < 中屏 <= 1200px */
        @media screen and (min-width: 800px) and (max-width: 1200px){
            .div1 {
                background-color:yellow;
            }
        }

        /* 小屏 <= 800px */
        @media screen and (max-width: 800px){
            .div1 {
                background-color:green;
            }
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>